<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>长春轻轨线路</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="css/photoswipe.css" />
		<link rel="stylesheet" type="text/css" href="css/default-skin.css" />
		<link rel="stylesheet" type="text/css" href="css/subwayCss.css" />
		<style type="text/css">
			/** {
				background-color: transparent;
			}*/
			
			img {
				width: 100%;
			}
			
			#subway_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
			}
			
			.index_head {
				background-color: #0070B4;
				padding: 25px 20px;
				position: static;
				/*层级低于所有页面遮罩层*/
			}
			
			.app_head_left {
				float: left;
				width: 30%;
				padding-top: 6px;
				padding-left: 6px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 40%;
				padding-top: 5px;
			}
			
			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
			}
			
			.my-gallery {
				width: 45px;
				float: right;
				position: relative;
				left: 16px;
			}
			
			.weui-row {
				width: 100%;
				position: relative;
				top: -3px;
				border: 1px solid #DEDEDE;
			}
			
			.weui-row .weui-col-33 {
				display: block;
				height: 50px;
				line-height: 48px;
				background-color: #CCCCCC;
			}
			
			.weui-row .weui-col-33:nth-child(2) {
				background-color: #FFFFFF;
			}
			
			.weui-row .weui-col-33:nth-child(1) img {
				width: 37px;
			}
			
			.weui-row .weui-col-33 img {
				width: 31px;
				vertical-align: middle;
				margin-right: 3px;
			}
			
			.weui-row .weui-col-33 b {
				color: #FFFFFF;
				font-size: 1.15em;
				padding: 5px 0px;
			}
			/*--白色小竖线划分区域--*/
			
			.weui-row .weui-col-33 label {
				float: right;
				font-size: 1.3em;
				color: #FFFFFF;
				position: relative;
				left: 2px;
			}
			/*---遮罩层---*/
			
			.opacity {
				opacity: 0.7;
				filter: alpha(opacity=30);
				background-color: #000;
				z-index: 99;
			}
			
			.mask {
				position: fixed;
				height: 100%;
				width: 100%;
			}
			
			html,
			body {
				height: 100%;
			}
			
			.subwayZz_mid {
				padding: 10px;
				padding-top: 30px;
			}
			
			.subwayZz_mid div {
				width: 85%;
				height: 50px;
				border: 1px solid #DEDEDE;
				border-radius: 8px;
				margin-top: 30px !important;
				margin: auto;
				line-height: 48px;
				position: relative;
				left: 8px;
			}
			
			.subwayZz_mid div span {
				display: block;
				float: left;
				color: #666666;
				padding-left: 1em;
				border: none;
				width: 100%;
				outline: none;
				height: 90%;
				font-size: 1.2em;
				height: 35px;
				margin-top: 7px;
				line-height: 34px;
			}
			
			#lineNub {
				border-right: 1px solid #DEDEDE;
				width: 49%;
			}
			
			#stationPoint {
				/*border-left: 1px solid #DEDEDE;*/
				width: 50%;
			}
			
			#connotsearch_zd {
				display: block;
				width: 40%;
				height: 40px;
				line-height: 40px;
				color: #FFFFFF;
				font-size: 1.3em;
				text-align: center;
				border-radius: 8px;
				margin-top: 70px;
				background-color: #CCCCCC;
			}
			
			#search_zd {
				display: block;
				width: 40%;
				height: 40px;
				line-height: 40px;
				color: #FFFFFF;
				font-size: 1.3em;
				text-align: center;
				border-radius: 8px;
				margin-top: 70px;
				background-color: #0070B4;
			}
			/*----底部----*/
			
			footer {
				background-color: #DCDCDC;
				max-width: 640px;
				min-width: 320px;
				margin: 0px auto;
			}
			
			footer li {
				width: 50%;
			}
			
			footer li a {
				border-right: 1px solid #B1B1B1;
				height: 65%;
			}
			
			footer li:first-child a img {
				width: 50px;
			}
			
			footer li:last-child a img {
				width: 36px;
				margin-top: 2px;
			}
			
			footer label {
				color: #0070B4;
				position: relative;
				top: -13px;
				font-size: 1.1em;
			}
			/*--关闭按钮--*/
			
			.close-select {
				color: #0070B4 !important;
			}
			/*--下拉框每行高度属性--*/
			
			.weui_check_label {
				height: 70px;
			}
			
			#full_ZdResult .toolbar-inner {
				background-color: #333333;
				position: fixed;
				top: 0;
			}
			
			.toolbar-inner h1 {
				color: #FFFFFF !important;
			}
			
			.toolbar-inner a {
				color: #00B9E8 !important;
			}
			/*----车站选择弹出层样式----*/
			
			#full_ZdResult {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
				overflow: hidden;
				background-color: #FFFFFF !important;
			}
			
			#full_ZdResult .toolbar {
				background-color: #FFFFFF;
			}
			
			#subwayZd_tanchu {
				height: 100%;
				background-color: #FFFFFF;
			}
			
			#closeBtn {
				color: #FFFFFF;
				font-size: 1.2em;
				margin-top: -7px;
				margin-right: 8px;
			}
			
			.toolbar-inner {
				height: 70px !important;
				background-color: #333333;
				padding: 10px 0;
			}
			
			#full_ZdResult .toolbar-inner {
				padding: 25px 20px;
				position: fixed;
				top: 0px;
				width: 100%;
			}
			
			.toolbar-inner h1 {
				color: #FFFFFF !important;
				font-size: 1.5em !important;
			}
			
			.toolbar-inner a {
				color: #00B9E8 !important;
				font-size: 1.25em;
				padding-right: 1em !important;
			}
			
			.toolbar {
				height: 100%;
				z-index: 999999;
			}
			/*--查询结果区域样式--*/
			
			#result_mid_2 {
				text-align: center;
				font-size: 1.4em;
				margin-top: 1em;
				color: #666666;
			}
			
			.result_mid ul li {
				border-top: 1px dashed #DEDEDE;
				margin-top: 1em;
				padding: 10px;
				padding-left: 20px;
			}
			
			.result_mid ul li p {
				/*height: 2.5em;*/
				/*border: 1px solid red;*/
				line-height: 3em;
				font-size: 1.2em;
			}
			
			.result_mid ul li p span {
				color: #017FD6;
				font-size: 1.1em;
			}
			
			#full_ZdResult .bg_zhezhao {
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0;
				left: 0;
				/*background-image: url(img/subway/subwayBg.png);*/
				background-size: 130%;
				background-position: 0% 100%;
				background-repeat: no-repeat;
			}
			
			#picReturnPage {
				position: fixed;
				font-size: 1.12em;
				color: #FFFFFF;
				top: 33px;
				right: 18px;
				z-index: 100000;
			}
			
			.pswp__top-bar {
				height: 70px !important;
				display: block;
			}
			
			.my_lable {
				position: fixed;
				top: 40px;
				right: 20px;
				color: #FFFFFF;
			}
			
			.pswp__share-tooltip,
			.pswp__share-modal {
				display: none;
			}
			
			.app_head_right img {
				width: 45px;
			}
		</style>
	</head>

	<body ontouchstart>
		<div class="mask opacity" id="opacityDiv" style="display: none;"></div>
		<div id="subway_main">
			<div class="index_head" id="firTitle">
				<div class="app_head_left">
					<a href="index01.html" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">轨道交通</p>
				</div>
				<!--<div class="app_head_right">
					<img src="img/subway/subway_03.png" />
				</div>-->
			</div>
			<div class="weui-row weui-no-gutter tc">
				<a class="weui-col-33" href="subway.html">
					<img src="img/subway/whiteZhandian.png" /><b>站站</b>
				</a>
				<a class="weui-col-33">
					<img src="img/subway/blueZhanzhan.png" /><b style="color: #0070B4;">站点</b>
				</a>
				<a class="weui-col-33" href="subway3.html">
					<img src="img/subway/whiteCheliang.png" /><b>车辆</b>
				</a>
				<!--暂时注销车辆查询-->
			</div>
			<div class="subwayZz_mid">
				<div>
					<span id="lineNub">请选择线路</span>
					<span id="stationPoint">请选择站点</span>
				</div>
				<a href="javascript:;" id="search_zd" style="display: none;" class="public-th open-popup" data-target="#full_ZdResult">查询</a>
				<a href="javascript:;" id="connotsearch_zd">查询</a>
			</div>
			<div id="full_ZdResult" class="weui-popup-container popup-bottom weui-popup-modal-visible">
				<div class="weui-popup-overlay yinying" id="yinying"></div>
				<div id="subwayZd_tanchu" class="weui-popup-modal">
					<div class="toolbar">
						<div class="bg_zhezhao"></div>
						<div class="toolbar-inner">
							<div class="app_head_left">
								<a href="javascript:;" class="picker-button close-popup" id="closeBtn">返回</a>
							</div>
							<div class="app_head_mid">
								<p id="app_head_title">查询结果</p>
							</div>
						</div>
						<div class="result_mid">
							<h2 id="result_mid_2"></h2>
							<ul id="result_exitUl">
								<!--DOM添加动态数据至ul内部-->
								<!--<li>
									<p><span id="exitName">A出口</span></p>
									<p>概况：<span id="exitInfo">火车站、黄河路客运站</span></p>
									<p>公交：<span id="nearbyBus">无</span></p>
								</li>
								-->
							</ul>

						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/photoswipe.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/photoswipe-ui-default.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bigPicResearch.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/myJS/subway_BigPic_returnBtn.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var l;
			var s;
			$(function() {
				getRailwayName();
			});

			function changeBtnCol() {
				l = $("#lineNub").html();
				s = $("#stationPoint").html();
				if(l != "请选择线路" && s != "请选择站点") {
					$("#connotsearch_zd").hide();
					$("#search_zd").show();
				} else {
					//					alert(l1 + "--" + l2 + "--" + s1 + "--" + s2);
					$("#search_zd").hide();
					$("#connotsearch_zd").show();
				}
			}

			function getArrAjax(d, t) {
				var type;
				type = d.titles.indexOf("轻轨") > -1 ? 1 : 2;
				console.log("类型----->" + type);
				var stopItems; //设置一个全局变量，将选择的线路所有站点以数组形式赋值
				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "rail_station_info",
						"LINENAME": d.titles,
						"RAILTYPE": type //1为轻轨（默认）2为地铁
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						//站点数据处理
						var allStr = "";
						for(var i = 0; i < eval(data.DATA).length; i++) {
							var startStopStr = '"title"' + ':' + '"' + eval(data.DATA)[i].STOP_NAME + '"';
							//								allStr+= ","+eval(data.DATA)[i].STOP_NAME;
							allStr += ",{" + startStopStr + "}";
						}
						allStr = allStr.substr(1);
						stopItems = JSON.parse('[' + allStr + ']');
						//						console.log(stopItems);
						//点击起点站名框
						$(t).select("update", {
							title: "请选择站点",
							items: stopItems,
							onChange: function(d) {
								//console.log(d.titles);
								$(t).html(d.titles);
								changeBtnCol();
							},
							onOpen: function() {
								//弹窗打开时 显示遮罩层
								$("#opacityDiv").show();
							},
							onClose: function() {
								//弹窗关闭时 隐藏遮罩层
								$("#opacityDiv").hide();
							}
						});
						$(t).click();
					},
					error: function(data) {
						$.alert("连接超时，请检查网络设置", "提示");
					}
				});
			}

			//获取地铁轻轨线路名称信息
			function getRailwayName() {
				var subwayLineItems;
				$.ajax({
					type: 'post',
					url: Url,
					async: false,
					cache: false,
					data: {
						type: "rail_line_info",
					},
					jsonp: "callbackparam",
					//服务端用于接收callback调用的function名的参数
					jsonpCallback: "data",
					dataType: 'jsonp',
					success: function(data) {
						if(data.CODE == "1") {
							var d = data.DATA;
							var m = data.MDATA;
							if(isEncrypt(d, m)) {
								var d = eval(d);
								var dataStr = JSON.stringify(d);
								dataStr = dataStr.replace(/LINENAME/g, "title");
								subwayLineItems = JSON.parse(dataStr);
								//								console.log("线路条数---->"+dataArr.length);
								$("#lineNub").select("update", {
									title: "请选择线路",
									items: subwayLineItems,
									onChange: function(d) {
										$("#lineNub").html(d.titles);
										//获取本条轻轨站点信息
										getArrAjax(d, $("#stationPoint"));
										changeBtnCol();
										$("#stationPoint").html("请选择站点");
									},
									onOpen: function() {
										//弹窗打开时 显示遮罩层
										$("#opacityDiv").show();
									},
									onClose: function() {
										//弹窗关闭时 隐藏遮罩层
										$("#opacityDiv").hide();
									}
								});

							} else {
								errMD();
							}
						}
					}
				});
			}
			//选择起点的线路与站名
			$("#lineNub").select({
				title: "请选择线路",
				items: [],
				onChange: function(d) {
					$("#lineNub").html(d.titles);
					//获取本条轻轨站点信息
					getArrAjax(d, $("#stationPoint"));
					changeBtnCol();
					$("#stationPoint").html("请选择站点");
					//changeSearchBtn();
				},
				onOpen: function() {
					//弹窗打开时 显示遮罩层
					$("#opacityDiv").show();
				},
				onClose: function() {
					//弹窗关闭时 隐藏遮罩层
					$("#opacityDiv").hide();
				}
			});
			$("#lineNub").click(function() {
				//				if($(this).html()!="请选择线路"){
				//					window.location.reload();
				//					
				//				}
			});
			//点击查询按钮查询站点信息
			$("#search_zd").click(function() {
				//				console.log(l);
				//				console.log(s);
				$.ajax({
					//获取轻轨站站查询信息
					type: "post",
					url: Url,
					data: {
						"type": "rail_station_out_info",
						"STATIONNAME": s
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						//						console.log(data.DATA);
						$("#result_mid_2").html(s);
						for(var i = 0; i < eval(data.DATA).length; i++) {
							var exitName = eval(data.DATA)[i].ENTRANCE_EXIT_NAME;
							var exitInfo = eval(data.DATA)[i].ENTRANCE_EXIT_INFO;
							var nearbyBus = eval(data.DATA)[i].ROUTE_INFO;
							if(nearbyBus == "null") {
								//附近公交返回结果为null时 替换为字符串中文“无”
								nearbyBus = "无";
								//								console.log(nearbyBus);
							}
							var li = $("<li></li>");
							$("#result_exitUl").append(li);
							var p1 = $('<p><span>' + exitName + '</span></p>');
							var p2 = $('<p>概况：<span>' + exitInfo + '</span></p>');
							var p3 = $('<p>公交：<span>' + nearbyBus + '</span></p>');
							$(li).append(p1, p2, p3);
							if(p3.children("span").html() == "无") {
								//附近公交结果为无的 去除高亮显示
								p3.children("span").css("color", "#666666");
							}
						}
						//						<p><span>A出口</span></p>
						//						<p>概况：<span>火车站、黄河路客运站</span></p>
						//						<p>公交：<span id="nearbyBus">无</span></p>
						//						var far = eval(data.DATA);
						//						var price = eval(data.DATA)[0].STOP_PRICE;
						//						var time = eval(data.DATA)[0].EXPECT_TIME;
						//						$("#subResult_start").html(s1);
						//						$("#subResult_end").html(s2);
						//						$("#resultLong").html(far);						
						//						$("#resultPrice").html(price);
						//						$("#resultTime").html(time);
					},
					error: function(data) {
						$.alert("连接超时，请检查网络设置", "提示");
					}
				});
			});
			$("#closeBtn").click(function() {
				//点击查询结果弹出框中的返回按钮 清空查询结果ul中所有li
				$("#result_exitUl").html("");
			});
		</script>
	</body>

</html>